<template>
  <div>
    <h1>个人中心</h1> <!-- 页面标题 -->
    <div v-if="accountInfoData"> <!-- 条件渲染，确保数据加载完成 -->
      <div class="item"> <!-- 信息项 -->
        <div class="text">管理员ID:</div> <!-- 字段名称 -->
        <div class="value">{{ accountInfoData.id }}</div> <!-- 动态显示管理员ID -->
      </div>
      <div class="item">
        <div class="text">账号:</div>
        <div class="value">{{ accountInfoData.account }}</div> <!-- 动态显示账号 -->
      </div>
      <div class="item">
        <div class="text">用户组:</div>
        <div class="value">{{ accountInfoData.userGroup }}</div> <!-- 动态显示用户组 -->
      </div>
      <div class="item">
        <div class="text">创建时间:</div>
        <div class="value">{{ formatDate(accountInfoData.ctime) }}</div> <!-- 动态显示格式化后的创建时间 -->
      </div>

      <div class="avatar">管理员头像:</div> <!-- 头像标题 -->
      <!-- 上传地址 --><!-- 不显示文件列表 --><!-- 上传成功回调 --><!-- 上传前校验 -->
      <el-upload
        class="avatar-uploader"
        :action="'api/users/avatar_upload?id=' + accountInfoData.id" 
        :show-file-list="false" 
        :on-success="handleAvatarSuccess" 
        :before-upload="beforeAvatarUpload" 
      >
        <img
          v-if="accountInfoData.imgUrl"
          :src="serverUrl + accountInfoData.imgUrl"
          class="avatar"
        /> <!-- 动态显示头像 -->
        <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon> <!-- 上传图标 -->
      </el-upload>
    </div>
  </div>
</template>

<script setup>
import { accountInfo } from '@/views/api/account'; // 导入获取用户信息的函数
import { ref } from 'vue'; // 导入 Vue 的响应式引用
import { serverUrl } from '@/views/utils/common'; // 导入服务器地址
import { ElMessage } from 'element-plus'; // 导入消息提示组件
import { Plus } from '@element-plus/icons-vue'; // 导入上传图标

const accountInfoData = ref(null); // 定义响应式变量，存储用户信息

const getAccountInfo = async () => { // 获取用户信息的函数
  let { id } = JSON.parse(sessionStorage.getItem('user')); // 从 sessionStorage 获取用户 ID
  const res = await accountInfo({ id }); // 调用后端接口获取用户信息
  accountInfoData.value = res.accountInfo; // 将获取到的用户信息存储到响应式变量中
};
getAccountInfo(); // 页面加载时自动调用获取用户信息

const beforeAvatarUpload = (file) => { // 上传前校验函数
  console.log(file); // 打印上传的文件信息
  if (!file.type.includes('image')) { // 检查文件类型是否为图片
    ElMessage.error('文件类型必须是图片'); // 提示错误信息
    return false; // 阻止上传
  }
  if (file.size > 1 * 1024 * 1024) { // 检查文件大小是否超过 1MB
    ElMessage.error('文件大小不能超过 1M'); // 提示错误信息
    return false; // 阻止上传
  }
  return true; // 允许上传
};

const handleAvatarSuccess = () => { // 上传成功回调
  getAccountInfo(); // 重新获取用户信息，更新头像
};

// 日期格式化方法
const formatDate = (date) => {
  if (!date) return ''; // 如果日期为空，返回空字符串
  const d = new Date(date); // 创建日期对象
  const year = d.getFullYear(); // 获取年份
  const month = String(d.getMonth() + 1).padStart(2, '0'); // 获取月份并补零
  const day = String(d.getDate()).padStart(2, '0'); // 获取日期并补零
  return `${year}-${month}-${day}`; // 返回格式化后的日期
};
</script>

<style lang="scss" scoped>
.item {
  width: 100%; // 信息项宽度
  height: 50px; // 信息项高度
  line-height: 50px; // 行高
  border-bottom: 1px solid #ccc; // 底边框
  display: flex; // 使用 flex 布局
  .text {
    float: left; // 左浮动

    font-size: 18px; // 字体大小
  }
  .value {
    float: left; // 左浮动
    width: 130px; // 字段值宽度

  }
 
}
.avatar{
    width:200px;
  
  }
  .avatar-uploader{
    width:200px;
    height: 200px;
  }
</style>